<template id="albumItem">
  <div class="albumItem" ref="albumItem">
    <!-- <div class="phoneBanner">
      <mail-banner />
    </div> -->
    <album ref="album" :productList="productList" :sortList="sortList" :page="page" :isShowSelect="isShowSelect"
      @change="changePage" @changeTypeByPhone="changeTypeByPhone" @changeSort="changeSort"
      @changeSortByPhone="changeSortByPhone" @open="openSelect" @clickPhoneType="clickPhoneType"
      @changeKind="changeKind" />
  </div>
</template>

<script>
import MailBanner from "../MailBanner.vue";
import Album from "./components/Album.vue";
import { getGoodsAlbumListApi } from "@/api";
import { iscode, getWidth } from "@/utils";
import { mapState, mapMutations } from "vuex";
export default {
  components: { Album, MailBanner },
  name: "AlbumItem",
  data() {
    return {
      productList: [],
      page: {
        defaultPagination: 1,
        pageCount: 8,
        totalPages: 0,
      },
      sortList: [
        {
          value: "",
          text: "默认排序",
        },
        {
          value: "goods_price desc",
          text: "价格降序",
        },
        {
          value: "goods_price asc",
          text: "价格升序",
        },
        {
          value: "create_time desc",
          text: "时间降序",
        },
        {
          value: "create_time asc",
          text: "时间升序",
        },
      ],
      typeValue: "",
      sortValue: "",
      kindValue: "",
      isShowSelect: false,
    };
  },
  computed: {
    ...mapState(["mailTab"]),
  },
  methods: {
    ...mapMutations(["choseMailTab"]),
    //获取专辑列表
    async getGoodsAlbumList() {
      let result = await getGoodsAlbumListApi({
        goods_cate_id: this.kindValue,
        page: this.page.defaultPagination,
        pagesize: this.page.pageCount,
        orderby: this.sortValue,
      });
      if (iscode(result)) {
        this.page.totalPages = result.result.count;
        this.productList = result.result.list;
        this.productList.map((item, index) => {
          this.$set(item, "image", result.result.show_url + item.images[0]);
        });
      }
    },
    //分页
    changePage(payload) {
      this.page.defaultPagination = payload;
      this.getGoodsAlbumList();
    },
    //选择单品
    changeTypeByPhone(payload) {
      this.typeValue = payload;
      this.$router.push("/mail");
    },
    //排序
    changeSort(payload) {
      this.sortValue = payload;
      this.getGoodsAlbumList();
    },
    //排序
    changeSortByPhone(payload) {
      this.sortValue = payload;
      this.isShowSelect = false;
      this.getGoodsAlbumList();
    },
    //选择类型
    changeKind(payload) {
      this.kindValue = payload;
      this.getGoodsAlbumList();
    },
    //排序展示
    openSelect() {
      this.isShowSelect = !this.isShowSelect;
    },
    clickPhoneType(payload) {
    },
  },
  mounted() {
    if (getWidth() <= 768) {
      this.page.pageCount = 9999;
    } else {
      this.page.pageCount = 8;
    }
    window.onresize = function () {
      if (this.$refs.albumItem) {
        if (getWidth() <= 768) {
          this.page.pageCount = 9999;
        } else {
          this.page.pageCount = 8;
        }
      }
    };
    this.getGoodsAlbumList();
  },
};
</script>

<style lang="less" scoped>
.albumItem {
  width: 100%;
  height: 100%;

  .phoneBanner {
    display: none;
  }
}

@media screen and (max-width: 768px) {
  .albumItem {
    .phoneBanner {
      display: block;
    }
  }
}
</style>
